<template>
  <div v-bind="$attrs" class="ablsoute w-[186px] h-[80px] flex flex-col items-center justify-center">
    <p class="w-[100%] text-[16px] text-center">
      {{ propValue?.title }}
    </p>

    <px-tooltip placement="top" effect="light">
      <template #content>
        <div class="flex items-center justify-center">
          <tipclick class="mb-1 mr-1" />
          <span>{{ propValue?.tip }}</span>
        </div>
      </template>
      <location class="pmd-img" @click="generalEvent" />
    </px-tooltip>
  </div>
</template>
<script setup lang="ts">
import location from "@/assets/svg/zuobiao.svg?component";
import tipclick from "@/assets/svg/KHCFDC.svg?component";
import { computed, onMounted, reactive, ref, toRaw, toRefs, watch } from "vue";
const props = defineProps<{
  propValue?: {
    title: string;
    tip: string;
    routerKey: string;
  };
  remoteData?: { [key: string]: any };
  element?: { [key: string]: any };
}>();
const emits = defineEmits(["generalEvent"]);
const generalEvent = () => {
  console.log("generalEvent");
  emits("generalEvent", { type: "compRouter", compEmitData: props.propValue.routerKey });
};
</script>
<style lang="scss">
.pmd-img {
  height: 56px;
  color: #34d399;
  cursor: pointer;
  outline: none;

  &:hover {
    color: rgb(59 130 246) !important;
    transform: scale(1.2);
  }
}
</style>
